import React, { Component } from "react";
import { connect } from "dva";
import { Modal, Button, Spin } from "antd";
import IframeWrapper from 'components/IframeWrapper';
import RecordForm from "./RecordForm";

@connect(({ FlowHandle, loading }) => ({
  flowHandleStore: FlowHandle,
  formLog: FlowHandle.formLog,
  loading,
}))
class FormDetail extends Component {

  
  render() {
    const { onCancel, visible, confirmLoading, taskFormUrl, loading, formLog, fieldData } = this.props;
    const detailLoading = loading.effects["FlowHandle/historyExternalProcessForm"] || loading.effects["FlowHandle/historyExternalTaskForm"] || false;
    const modalLoading = loading.effects["FlowHandle/getFormLog"] || false;
    
    return (
      <Modal
        title="表单详情"
        visible={visible}
        onCancel={() => onCancel(false)}
        width="800px"
        centered
        destroyOnClose
        hideRequiredMark
        labelAlign="left"
        confirmLoading={confirmLoading}
        footer={[
          <Button key="back" onClick={() => onCancel(false)}>
            关闭
          </Button>,
        ]}
      >
        <Spin spinning={detailLoading} delay={300}>
          {/* {processFormUrl && (
            <IframeWrapper
              autoFitHeight
              src={processFormUrl}
              style={{ height: 352 }}
              iframeStyle={{ height: 352 }}
              getFrameRef={ref => { this.iframeRef = ref; }}
            />
          )} */}
          {taskFormUrl && (
            <IframeWrapper
              autoFitHeight
              src={taskFormUrl}
              style={{ height: 352 }}
              iframeStyle={{ height: 352 }}
              getFrameRef={ref => { this.iframeRef = ref; }}
            />
          )}
          {!taskFormUrl && (
            <RecordForm
              formConfigData={formLog}
              dataLoading={modalLoading}
              fieldData={fieldData}
            />
          )}
        </Spin>
      </Modal>
    );
  }
}

export default FormDetail;
